<template>
	<view>
		<l-echart ref="areaEcharts"></l-echart>
		<l-echart ref="schoolEcharts"></l-echart>
	</view>
</template>

<script>
	import {
		getChartDateByGroupId,
		getSchoolTargetCountByAreaCodeAndGroupId
	} from "@/api/supervise/index.js"
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				groupId: 0,
				activityId: 0,
				areaOption: {
					title: {
						subtext: "各区视导学校数量实时统计图",
						left: "center"
					},
					color: ['#4587E7', '#35AB33', '#F5AD1D', '#ff7f50', '#da70d6',
						'#32cd32', '#6495ed'
					],
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							rotate: 50,
							textStyle: {
								fontSize: 12
							}
						},
					},
					yAxis: {
						type: 'value',
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
					},
					series: [{
						data: [],
						type: 'bar',
						label: {
							show: true, //开启显示
							position: 'top', //在上方显示
							textStyle: { //数值样式
								color: 'black',
								fontSize: 12,
							}
						},
						barGap: "1%", //同系列柱子间距
						barCategoryGap: "15%", //不同系列柱子间间隔
						barWidth: 20, // 设置柱子粗细
					}]
				},
				schoolOption: {
					title: {
						subtext: "视导学校数量实时统计图",
						left: "center"
					},
					color: ['#4587E7', '#35AB33', '#F5AD1D', '#ff7f50', '#da70d6',
						'#32cd32', '#6495ed'
					],
					xAxis: {
						type: 'category',
						data: [

						],
						axisLabel: {
							rotate: 50,
							textStyle: {
								fontSize: 12
							}
						},
					},
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
					}],
					series: [{
						type: 'bar',
						data: [],
						label: {
							show: true, //开启显示
							position: 'top', //在上方显示
							textStyle: { //数值样式
								color: 'black',
								fontSize: 12
							}
						},
						barGap: "1%", //同系列柱子间距
						barCategoryGap: "15%", //不同系列柱子间间隔
						barWidth: 20, // 设置柱子粗细
					}]
				},
				areaData: [],
				first: true,
			}
		},
		onLoad(option) {
			this.groupId = option.groupId;
			this.activityId = option.activityId;
		},
		mounted() {
			this.getChartDateByGroupId();
		},
		methods: {
			getChartDateByGroupId() {
				getChartDateByGroupId(this.activityId, this.groupId).then(res => {
					if (res.status === 0) {
						const schoolCountByArea = res.schoolCountByArea;
						this.areaData = schoolCountByArea;
						const xAxisData = schoolCountByArea.map(item => {
							return item.areaName;
						});
						const seriesData = schoolCountByArea.map(item => {
							return item.count;
						});
						this.areaOption.xAxis.data = xAxisData;
						this.areaOption.series[0].data = seriesData;
						this.inintAreaEcharts(this.areaOption);
						this.getSchoolTargetCountByAreaCodeAndGroupId(schoolCountByArea[0].areaCode,
							schoolCountByArea[0].areaName)
					}
				})
			},
			getSchoolTargetCountByAreaCodeAndGroupId(areaCode, areaName) {
				getSchoolTargetCountByAreaCodeAndGroupId(this.activityId, this.groupId, areaCode).then(res => {
					if (res.status === 0) {
						const schoolTargetsDetail = res.schoolTargetsDetail;
						const xAxisData = schoolTargetsDetail.map(item => {
							return item.schoolName;
						});
						const seriesData = schoolTargetsDetail.map(item => {
							return item.total;
						});
						this.schoolOption.title.subtext = `${areaName}视导学校数量实时统计图`;
						this.schoolOption.xAxis.data = xAxisData;
						this.schoolOption.series[0].data = seriesData;
						this.inintSchoolEcharts(this.schoolOption);
					}
				})
			},
			toJSON() {

			},
			inintAreaEcharts(option) {
				this.$refs.areaEcharts.clear();
				this.$refs.areaEcharts.showLoading();
				this.$refs.areaEcharts.init(echarts, chart => {
					chart.setOption(option);
					chart.hideLoading();
					if (this.areaData.length > 1) {
						chart.on("click", params => {
							const area = this.areaData[params.dataIndex];
							this.getSchoolTargetCountByAreaCodeAndGroupId(area.areaCode, area.areaName);
							return;
						});
					}
				});
			},
			inintSchoolEcharts(option) {
				this.$refs.schoolEcharts.clear();
				this.$refs.schoolEcharts.showLoading();
				if (this.first) {
					this.$refs.schoolEcharts.init(echarts, chart => {
						chart.setOption(option);
						chart.hideLoading();
					});
					this.first = false;
				} else {
					this.$refs.schoolEcharts.setOption(option);
					this.$refs.schoolEcharts.hideLoading();
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.echarts {
		margin-top: 20px;
		width: 100vw;
		height: 300px;
	}
</style>